<!doctype html>
<html lang="en">

<!-- Mirrored from adminity.novalx.com/analytics.html by HTTrack Website Copier/3.x [XR&CO'2013], Wed, 02 Oct 2013 15:20:09 GMT -->
<head>
  <meta charset="utf-8">
  <title>Adminity - Analytics</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="shortcut icon" href="favicon.gif">
  <!---CSS Files-->
  <link rel="stylesheet" href="css/master.css">
  <!---jQuery Files-->
  <script src="js/jquery-1.7.1.min.js"></script>
  <script src="js/jquery-ui-1.8.17.min.js"></script>
  <script src="js/styler.js"></script>
  <script src="js/jquery.tipTip.js"></script>
  <script src="js/colorpicker.js"></script>
  <script src="js/sticky.full.js"></script>
  <script src="js/global.js"></script>
  <script src="js/flot/jquery.flot.min.js"></script>
  <script src="js/flot/jquery.flot.pie.min.js"></script>
  <script src="js/flot/jquery.flot.resize.min.js"></script>
  <!---Fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!--[if lte IE 8]>
  <script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script>
  <![endif]-->
</head>
<body>

  <!--- HEADER -->

  <div class="header">
   <a href="dashboard.html"><img src="img/logo.png" alt="Logo" /></a> 
   <div class="styler">
     <ul class="styler-show">
       <li><div id="colorSelector-top-bar"></div></li>
       <li><div id="colorSelector-box-head"></div></li>
     </ul>
   </div>
  </div>

  <div class="top-bar">
      <ul id="nav">
        <li id="user-panel">
          <img src="img/nav/usr-avatar.jpg" id="usr-avatar" alt="" />
          <div id="usr-info">
            <p id="usr-name">Welcome back, Michael.</p>
            <p id="usr-notif">You have 6 notifications. <a href="#">View</a></p>
            <p><a href="#">Preferences</a><a href="#">Profile</a><a href="index.html">Log out</a></p>
          </div>
        </li>
        <li>
        <ul id="top-nav">
         <li class="nav-item">
           <a href="dashboard.html"><img src="img/nav/dash.png" alt="" /><p>Dashboard</p></a>
         </li>
         <li class="nav-item">
           <a href="#"><img src="img/nav/anlt-active.png" alt="" /><p>Analytics</p></a>
         </li>
         <li class="nav-item">
           <a href="tables.html"><img src="img/nav/tb.png" alt="" /><p>Tables</p></a>
         </li>
         <li class="nav-item">
           <a href="calendar.html"><img src="img/nav/cal.png" alt="" /><p>Calendar</p></a>
         </li>
         <li class="nav-item">
           <a href="widgets.html"><img src="img/nav/widgets.png" alt="" /><p>Widgets</p></a>
         </li>
         <li class="nav-item">
           <a href="grid.html"><img src="img/nav/grid.png" alt="" /><p>Grid</p></a>
           <ul class="sub-nav">
            <li><a href="#">12 Columns</a></li>
            <li><a href="#">16 Columns</a></li>
          </ul>
         </li>
         <li class="nav-item">
           <a href="filemanager.html"><img src="img/nav/flm.png" alt="" /><p>File Manager</p></a>
         </li>
         <li class="nav-item">
           <a href="gallery.html"><img src="img/nav/gal.png" alt="" /><p>Gallery</p></a>
         </li>
         <li class="nav-item">
           <a href="icons.html"><img src="img/nav/icn.png" alt="" /><p>Icons</p></a>
         </li>
         <li class="nav-item">
           <a href="#"><img src="img/nav/err.png" alt="" /><p>Error Pages</p></a>
           <ul class="sub-nav">
            <li><a href="403.html">403 Page</a></li>
            <li><a href="404.html">404 Page</a></li>
            <li><a href="503.html">503 Page</a></li>
          </ul>
         </li>
         <li class="nav-item">
           <a href="typography.html"><img src="img/nav/typ.png" alt="" /><p>Typography</p></a>
         </li>
       </ul>
      </li>
     </ul>
  </div>

  <!--- CONTENT AREA -->

  <div class="content container_12">
      <div class="ad-notif-success grid_12"><p>With the jQuery Flot plugin, your geeky analytical side will be pleased with the charting possibilities.</p></div>
      <div class="box grid_6">
        <div class="box-head"><h2>Line Chart</h2></div>
        <div class="box-content">
          <div id="flot-lines"></div>
        </div>
      </div> 
      <div class="box grid_6">
        <div class="box-head"><h2>Bar Chart</h2></div>
        <div class="box-content">
          <div id="flot-bars"></div>
        </div>
      </div>
      <div class="box grid_6">
        <div class="box-head"><h2>Pie Chart</h2></div>
        <div class="box-content">
          <div id="flot-pie"></div>
        </div>
      </div> 
      <div class="box grid_6">
        <div class="box-head"><h2>Realtime Chart</h2></div>
        <div class="box-content">
          <div id="flot-realtime"></div>
        </div>
      </div>
  </div>

<div class="footer container_12">
  <p class="grid_12">Powered by Adminity Administration Interface</p>
</div>

<script> /* SCRIPTS */
  $(function () {

      /* FOR THE LINE CHART */
      var sin = [], cos = [];
      for (var i = 0; i < 14; i += 0.5) {
          sin.push([i, Math.sin(i)]);
          cos.push([i, Math.cos(i)]);
      }
      var plot = $.plot($("#flot-lines"),
             [ { data: sin, label: "Green", color: "#71a100"}, { data: cos, label: "Blue", color: "#308eef" } ], {
                 series: {
                     lines: { show: true },
                     points: { show: true }
                 },
                 grid: { hoverable: true },
                 yaxis: { min: -1.2, max: 1.2 }
               });
      var previousPoint = null;
      $("#flot-lines").bind("plothover", function (event, pos, item) {
          if ($("#enablePosition:checked").length > 0) {
              var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
              $("#hoverdata").text(str);
          }
      });

      /* FOR THE BAR CHART */

      var d1 = [[0,5], [2,7], [4,10], [6,16], [8,19], [10,23], [12,30], [14,35], [16,40], [18,46], [20,54]];
      var d2 = [[1,6], [3,9], [5,11], [7,17], [9,21], [11,27], [13,33], [15,38], [17,43], [19,50]];
      $.plot($("#flot-bars"), [
          {
             data: d1,
             color: "#71a100",
             label: "Green",
             bars: { show: true }
          },
          {
            data: d2,
            color: "#308eef",
            label: "Blue",
            bars: { show: true }
          }
      ]);

      /* FOR THE PIE CHART */

      var piedata = 
      [ 
              { label: "Green",  data: 50, color: "#71a100"}, 
              { label: "Blue",  data: 25, color: "#308eef"},
              { label: "Yellow",  data: 25, color: "#d1ca00"}
      ] 

      $.plot($("#flot-pie"), piedata,
      {
              series: {
                  pie: { 
                      show: true
                  }
              },
              grid: {
                  hoverable: true,
                  clickable: true
              },
              redraw: true
      });

      /* FOR THE REALTIME CHART */

      var data = [], totalPoints = 300;
          function getRandomData() {
              if (data.length > 0)
                  data = data.slice(1);

              // do a random walk
              while (data.length < totalPoints) {
                  var prev = data.length > 0 ? data[data.length - 1] : 50;
                  var y = prev + Math.random() * 10 - 5;
                  if (y < 0)
                      y = 0;
                  if (y > 100)
                      y = 100;
                  data.push(y);
              }

              // zip the generated y values with the x values
              var res = [];
              for (var i = 0; i < data.length; ++i)
                  res.push([i, data[i]])
              return res;
          }

          var updateInterval = 30;

          var options = {
              series: { shadowSize: 0 }, // drawing is faster without shadows
              yaxis: { min: 0, max: 100 },
              xaxis: { show: false }
          };
          var plot = $.plot($("#flot-realtime"), [ getRandomData() ], options);

          function update() {
              plot.setData([ getRandomData() ]);
              // since the axes don't change, we don't need to call plot.setupGrid()
              plot.draw();
              
              setTimeout(update, updateInterval);
          }

          update();

  })
</script>

</body>


<!-- Mirrored from adminity.novalx.com/analytics.html by HTTrack Website Copier/3.x [XR&CO'2013], Wed, 02 Oct 2013 15:20:11 GMT -->
</html>